/*
 * @Title: 确认订单
 * @Created by: ycq 
 */
<template>
	<view >
		<IndexHead :config='pageConfig'></IndexHead>
		<view class="order">
			<view class="address" @click="chooseAddress">
				<image class="pos" src="/static/shop/pos.png" mode="" ></image>
				<text>辽宁省沈阳市浑南新区国际软件园</text>
				<image class="more" src="/static/jiantou.png" mode=""></image>
			</view>
			<view class="goods" v-for="(item,index) in goodsData" :key='index'>
				<image class="goods-img" :src="item.img" mode=""></image>
				<view class="goods-right">
					<text class="goods-title">{{item.title}}</text>
					<text class="goods-type">{{item.type}}</text><text class="goods-num">X{{item.num}}</text>
					<text class="goods-price"><text class="money">￥</text>{{item.price}}</text>
				</view>
				<text class="goods-sum" style="color: #999999;">{{item.num}}件商品，计：<text style="color: #55A0FF;">￥{{item.price}}</text></text>
				<view class="ps">
					<text class="ps-label">配送费用：</text>
					<text class="freight">{{item.freight!=0?'￥'+item.freight:'免运费'}}</text>
				</view>
			</view>
			<view class="payMoney">
				<text class="ps-label">实付款：</text>
				<text class="goods-sum" style="color: #55A0FF;margin-top: 0;">￥233</text>
			</view>
			<view class="order-info">
				<view class="list-title">
					<text class='shu'></text>
					<text>订单信息</text>
					<text style="font-size: 26upx;margin-left: 40upx;color: rgba(153,153,153,1.00);">无</text>
				</view>
				
				<view class="contect">
					<view class="contect-btn">
						<image src="/static/msg-blue.png" mode=""></image>
						<text>联系客服</text>
					</view>
				</view>
			</view>
			<view class="like">
				<view class="like-head">
					<image src="/static/tjLine.png" mode=""></image>
					<text>你可能还喜欢</text>
					<image src="/static/tjLine.png" mode=""></image>
				</view>
				<view class="goods-item" v-for='(item,index) in likeData' :key='index'   @touchmove="gtouchmove()" @touchstart='tcStart(index)' @touchend.prevent="touchend">
					
					<view class="item-btns" v-if="openIndex == index"  >
						<view class="item-btn">
							<image src="/static/nolike.png"></image>
							<text>不感兴趣</text>
						</view>
						<view class="item-btn">
							<image src="/static/pingbi.png"></image>
							<text>屏蔽:扇子</text>
						</view>
						<view class="item-btn">
							<image src="/static/bushi.png"></image>
							<text>图片引起不适</text>
						</view>
						<view class="item-btn">
							<text>找同款</text>
						</view>
					</view>
					<view><image class="item-img" :src="item.img"></image>
					<text class="title">
						{{item.title}}
					</text>
					<text class="prize" >￥{{item.prize}}<text class="p-dot">{{item.prizeD}}</text></text>
					<text class="buyNum" >{{item.buyNum}}人付款</text></view>
					
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="bottom-btn gray">取消</view>
			
			<view class="bottom-btn yellow">付款</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				settlePrice:666,
				settleNum:2,
				redMoney:10,
				useRedBag:true,
				typeIndex:0,
				isMoving:false,
				isMask:false,
				openIndex:null,
				pageConfig:{
					common:{
						hasSearch:false, //显示整版搜索框
						hasTitle:true, //显示页面title
						hasMenu:false,
					},
					left:{
						showPos:false,
					},
					mid:{
						title:'订单详情' ,//页面title
						hasSearchMid:false //显示中间搜索框
					},
					right:{
						
					}
				},
				goodsData:[
					{
						img:'/static/banner.png',
						title:'宫廷古风中国风口红 长相思持久保湿防水',
						type:'浅蓝色官方旗舰店；L码；',
						num:1,
						price:233,
						freight:0,
					},
				],
				likeData:[
					{
						title:'宫廷古风中国风口红 长相思持久保湿防水',
						img:'/static/banner.png',
						prize:'69.',
						prizeD:'5',
						buyNum:123123
					},
					{
						title:'国粹京剧脸谱戏曲Q版人物吊坠书签金属创意古风',
						img:'/static/banner.png',
						prize:'69.',
						prizeD:'5',
						buyNum:1223
					},
					{
						title:'中国特色礼物送老外北京特色工艺品京剧脸谱摆件商务外事出国礼品',
						img:'/static/banner.png',
						prize:'69.',
						prizeD:'5',
						buyNum:1564
					},
					{
						title:'砚台天然原石 复刻故宫博物院款式 松花砚',
						img:'/static/banner.png',
						prize:'69.',
						prizeD:'5',
						buyNum:2333
					}
				],
				
			}
		},
		methods: {
			toDetail(){
				uni.navigateTo({
					url:'shopDetail'
				})
			},
			useRedbag(){
				this.useRedBag = !this.useRedBag
			},
			chooseAddress(){
				uni.navigateTo({
					url:'../../my/myAddress/myAddress2/address2'
				})
			},
			tcStart(index){
				clearTimeout(this.Loop); //再次清空定时器，防止重复注册定时器
				if(this.openIndex != index){
					this.Loop = setTimeout(function() {
						this.openMask(index)
						this.isMask = true
					}.bind(this), 500);
				}else{
					this.openMask(index)
				}
			},
			touchend() {
				clearTimeout(this.Loop);
				if (this.Loop != 0 && this.isMask == false && !this.isMoving) {
					this.toDetail()
				 }
				  
				this.isMoving = false
				this.isMask = false
			},
			gtouchmove(){
				this.isMoving = true
			    clearTimeout(this.Loop);//清除定时器;
			},
			openMask(index){
				if(this.openIndex != index){
					this.openIndex = index
				}else{
					this.openIndex = null
				}
			},
		},
		
	}
</script>

<style scoped>
	/* 订单主体 */
	.order{
		position: absolute;
		width: 750upx;
		height: calc(100vh - 130px);
		background: #FFFFFF;
		overflow: scroll;
		top: 127upx;
		margin-bottom: 100upx;
	}
	/* 地址 */
	.address{
		width: 750upx;
		height: auto;
		display: flex;
		padding-top: 25upx;
		padding-bottom: 25upx;
		flex-direction: row;
		border-bottom: rgba(238,238,238,1.00) solid 1upx;
		justify-content: space-between;
	}
	.pos{
		width: 26upx;
		height: 32upx;
		margin-left: 30upx;
		
	}
	.address text{
		width: 610upx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		height: 40upx;
		overflow: hidden;
		font-size: 24upx;
		color: #666666;
		line-height: 40upx;
	}
	.more{
		width: 26upx;
		height: 32upx;
		margin-right: 30upx;
	}
	/* 宝贝 */
	.goods{
		width: 750upx;
		height: auto;
		margin-top: 40upx;
		margin-bottom: 100upx;
		display: table;
		border-bottom: rgba(238,238,238,1.00) solid 1upx;
	}
	.goods:nth-child(n){
		margin-bottom: 0 ;
	}
	.goods-img{
		width: 196upx;
		height: 206upx;
		margin-left: 34upx;
		border-radius: 10upx;
		float: left;
	}
	.goods-right{
		width: 480upx;
		margin-right: 38upx;
		height: 206upx;
		float: right;
	}
	.goods-title{
		display: -webkit-box;
		margin-left: 28upx;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		height: 80upx;
		overflow: hidden;
		font-size: 28upx;
		color: #272222;
		margin-top: 30upx;
		line-height: 32upx;
	}
	.goods-type{
		height: 32upx;
		font-size: 24upx;
		margin-left: 30upx;
		color: #999999;
		background: rgba(246,246,246,1.00);
		padding: 4upx 10upx;
		float: left;
		line-height: 32upx;
	}
	.goods-num{
		font-size: 24upx;
		color: #999999;
		line-height: 32upx;
		height: 32upx;
		float: right;
	}
	.money{
		color: #55A0FF;font-size: 24upx;
		margin-top: 50upx;
		
		/* display: block; */
	}
	.goods-price{
		color: #55A0FF;
		font-size: 36upx;
		margin-top: 50upx;
		margin-left: 28upx;
		display: block;
		
	}
	.ps{
		width: 750upx;
		height: 40upx;
		margin-top: 320upx;
		margin-bottom: 30upx;
		padding-top: 20upx;
		border-top: rgba(238,238,238,1.00) solid 1upx;
	}
	.ps-label{
		margin-left: 34upx;
		font-size: 28upx;
		float: left;
	}	
	.payMoney{
		width: 750upx;
		height: 40upx;
		margin-top: 20upx;
		margin-bottom: 30upx;
		padding-top: 20upx;
		
	}
	.freight{
		color: #999999;
		font-size: 24upx;
		margin-right: 28upx;
		float: right;
	}
	.goods-sum{
		/* width: 750upx; */
		height: 40upx;
		margin-top: 40upx;
		float: right;
		font-size: 24upx;
		margin-right: 28upx;
	}


	.order-info{
		width: 750upx;
		
		border-top: rgba(238,238,238,1.00) solid 16upx;
		height: auto;
	}
	.list-title{
		width: 93.4%;
		margin-left: auto;
		margin-right: auto;
		height: 58.4upx;
		margin-top:20upx;
	}
	.list-title text{
		font-size: 30upx;
		
	}
	.shu{
		width: 0.7%;
		height: 3.06vw;
		background: #55A0FF;
		float: left;
		margin-top: 2.3vw;
		margin-right: 10px;
	}
	.order-info-item{
		width: 100%;
		height: 60upx;
		font-size: 26upx;
		line-height: 60upx;
		color: rgba(153,153,153,1.00);
	}
	.info-item-label{
		margin-left: 44upx;
	}
	.info-item-text{
		margin-left: 60upx;
	}
	.contect{
		width: 100%;
		height: 80upx;
		border-top: rgba(238,238,238,1.00) solid 1upx;
	}
	.contect-btn{
		width: 280upx;
		height: 80upx;
	}
	.contect image{
		width: 36upx;
		height: 36upx;
		margin-top: 24upx;
		margin-left: 47upx;
		float: left;
	}
	.contect text{
		font-size: 26upx;
		line-height: 80upx;
		margin-left: 15upx;
	}
	.like{
		width: 700upx !important;
		display: table;
		height: auto;
		padding: 40upx 25upx;
		background: rgba(238,238,238,1.00);
	}
	.like-head{
		width: 700upx;
		margin-bottom: 20upx;
		height: 40upx;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	.like-head image{
		width: 81upx;
		height: 15upx;
		margin: 13upx 48upx;
	}
	.like-head text{
		font-size: 28upx;
		line-height: 40upx;
	}
	
	
	
	
	/* 底部 */
	.bottom{
		width: 750upx;
		height: 127upx;
		background: #FFFFFF;
		position: fixed;
		z-index: 20upx;
		bottom: 0;
		box-shadow: 0px 0px 10px 0px rgba(157,202,236,0.45);
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
	}
	.bottom-btn{
		width: 155upx;
		height: 61upx;
		text-align: center;
		line-height: 61upx;
		font-size: 26upx;
		border: solid 1upx;
		border-radius: 20upx;
		margin-right: 30upx;
		margin-top: 36upx;
	}
	.gray{
		color: rgba(153,153,153,1.00);
		border-color: rgba(153,153,153,1.00);
	}
	.yellow{
		color: rgba(254,153,10,1.00);
		border-color: rgba(254,153,10,1.00);
	}
	.goods-item{
		width: 338upx;
		height: 515upx;
		margin-top: 24upx;
		position: relative;
		border-radius: 15upx;
		background: #FFFFFF;
	}
	.goods-item:nth-child(even){
		float: left;
	}
	.goods-item:nth-child(odd){
		float: right;
	}
	.goods-item .item-img{
		width: 338upx;
		height: 336upx;
		border-radius: 15upx 15upx 0 0;
	}
	.goods-item .title{
		padding-left: 24upx;
		padding-right: 24upx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		font-family: PingFang SC Regular;
		font-size: 26upx;
		font-weight: bold;
	}
	.prize{
		height: 30upx;
		color: #55A0FF;
		float: left;
		font-size: 30upx;
		margin-top: 40upx;
		margin-left: 24upx;
		text-align: left;
	}
	.p-dot{
		font-size: 24upx;
	}
	.buyNum{
		width: 200upx;
		float: right;
		text-align: right;
		font-size: 25upx;
		color: #999999;
		margin-right: 24upx;
		margin-top: 46upx;
	}
	.other-btn{
		width: 49upx;
		height: 29upx;
		background: rgba(0,0,0,0.5);
		z-index: 10;
		right: 9upx;
		top:9upx;
		border-radius: 15upx;
		display: flex;
		flex-direction: row;
		position: absolute;
		justify-content: center;
	}
	.other-btn-dot{
		width: 6upx;
		height: 6upx;
		margin-left: 2upx;
		margin-right: 2upx;
		margin-top: 11upx;
		background: #FFFFFF;
		border-radius: 50%;
	}
	.item-btns{
		position: absolute;
		width: 338upx;
		height: 455upx;
		padding-top: 60upx;
		border-radius: 15upx;
		z-index: 8;
		background: rgba(0,0,0,0.5);
	}
	.item-btns image{
		width: 36upx;
		height: 36upx;
		margin-top: 10upx;
		margin-right: 10upx;
	}
	.item-btn{
		width: 260upx;
		height: 60upx;
		background: #FFFFFF;
		border-radius: 50upx;
		margin-left: auto;
		margin-right: auto;
		margin-top: 30upx;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	.item-btn text{
		font-size: 26upx;
		color: #333333;
		line-height: 60upx;
	}
	
</style>
